.navbar {
    margin-left: 5vw;
    margin-right: 5vw;
}

#logo-txt {
    font-weight: bold;
}

.nav-link {
    margin-left: 2vw;
}

#home {
    background-image: url("../public/bg.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    border-bottom: 2px solid #ebebeb;
}

#home .container {
    display: flex;
    height: 90vh;
}

#logo-center {
    height: 200px;
    margin-right: 15vw;
}

#logo-center-motion {
    margin-top: auto;
    margin-bottom: auto;
}

#slogan {
    height: 20vh;
    margin-left: -5vw;
    margin-top: 40vh;
    margin-bottom: auto;
}

#feat {
    margin-top: 10vh;
    margin-bottom: 10vh;
    height: fit-content;
    width: auto;
}

#feat ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    margin-bottom: 0;
}

.feat-item {
    display: flex;
    flex-direction: row;
}

.feat-icon {
    width: 64px;
    height: 64px;
}

.feat-item div {
    margin-left: 2vw;
}

#services {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#services h2 {
    margin-top: 5vh;
    margin-left: auto;
    margin-right: auto;
    height: fit-content;
}

#services h2 strong {
    color: #56997d;
}

#services ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10vh;
    padding-left: 0;
}

#services ul li {
    margin: 10px;
    display: flex;
    flex-direction: column;
}

#services ul div {
    height: min-content;
    border-radius: 10%;
}

#services ul div:nth-child(2) {
    margin-top: 20vh;
}

#services ul li img {
    width: 300px;
    height: 250px;
    align-self: center;
}

#services ul li p {
    width: 20vw;
}

#style {
    margin-top: 20vh;
    margin-bottom: 20vh;
}

#scroll1 {
    background-image: url("../public/scroll1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 90vh;
}

#scroll3 {
    background-image: url("../public/scroll3.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 90vh;
}

#scroll4 {
    width: 100%;
    height: 110%;
}

#style h2 {
    text-align: center;
}

#style h2 strong {
    color: #fd5b69;
}

#creativity {
    margin-top: 40vh;
    margin-bottom: 20vh;
    display: flex;
    flex-direction: column;
}

#creativity-header {
    display: flex;
    flex-direction: column;
    margin-top: 10vh;
    margin-bottom: 20vh;
}

#creativity div h2 {
    font-size: 3.5vw;
}

#creativity div h2 strong {
    font-weight: normal;
}

#creativity div h2:first-child strong {
    color: #e191f5;
}

#creativity div h2:nth-child(2) {
    margin-left: 13vh;
}

#creativity div h2:nth-child(2) strong {
    color: #a5c2ff;
}

#line {
    width: 33vw;
}

#examples {
    width: 100vw;
}

.example-img {
    width: 25vw;
    height: 250px;
}

#cooperate {
    background-image: url("../public/cooperate_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin-top: 20vh;
    display: flex;
}

#cooperate h2 {
    margin-top: 15vh;
    margin-left: auto;
    margin-right: auto;
}